<template>
  <div>
    <!-- 搜索查询 -->
    <van-sticky style="display: block">
      <div style="background-color: #4fc08d; padding-top: 1.5rem">
        <van-row type="flex">
          <van-col span="1" style="margin-top: 1.2rem; margin-left: 0.8rem"
            ><van-icon name="arrow-left" @click="goback"
          /></van-col>
          <van-col span="21"
            ><van-search
              v-model="value"
              shape="round"
              background="#4fc08d"
              placeholder="请输入搜索关键词"
          /></van-col>
          <!-- <van-col
            span="2"
            style="font-size: 1.2em; width: 2em; margin-top: 0.8em"
            type="btn"
            >搜索</van-col
          > -->
        </van-row>
      </div>
    </van-sticky>

    <!-- 搜索结果 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="item in list" :key="item">
        <div>
          <div data-v-28a7b29f="" class="van-cell">
            <div
              data-v-28a7b29f=""
              class="van-cell__value van-cell__value--alone"
            >
              <div data-v-28a7b29f="">
                <div data-v-28a7b29f="" class="van-card">
                  <div data-v-28a7b29f="" class="van-card__header">
                    <a data-v-28a7b29f="" class="van-card__thumb"
                      ><div
                        data-v-28a7b29f=""
                        class="van-image"
                        style="width: 100%; height: 100%"
                      >
                        <img
                          src="https://img01.yzcdn.cn/vant/ipad.jpeg"
                          class="van-image__img"
                          style="object-fit: cover"
                        /></div
                    ></a>
                    <div data-v-28a7b29f="" class="van-card__content">
                      <div data-v-28a7b29f="">
                        <div
                          data-v-28a7b29f=""
                          class="van-card__title van-multi-ellipsis--l2"
                        >
                          商品标题
                        </div>
                        <div
                          data-v-28a7b29f=""
                          class="van-card__desc van-ellipsis"
                        >
                          描述信息
                        </div>
                      </div>
                      <div data-v-28a7b29f="" class="van-card__bottom">
                        <div data-v-28a7b29f="" class="van-card__price">
                          <div data-v-28a7b29f="">
                            <span
                              data-v-28a7b29f=""
                              class="van-card__price-currency"
                              >¥</span
                            ><span
                              data-v-28a7b29f=""
                              class="van-card__price-integer"
                              >2</span
                            >.<span
                              data-v-28a7b29f=""
                              class="van-card__price-decimal"
                              >00</span
                            >
                          </div>
                        </div>
                        <div data-v-28a7b29f="" class="van-card__num">x2</div>
                        <div data-v-28a7b29f="">
                          <span
                            data-v-28a7b29f=""
                            class="van-tag van-tag--plain van-tag--danger"
                            style="border-radius: 1rem"
                            >标签</span
                          >&nbsp;
                          <span
                            data-v-28a7b29f=""
                            class="van-tag van-tag--plain van-tag--danger"
                            style="border-radius: 1rem"
                            >标签</span
                          >&nbsp;
                        </div>
                      </div>
                    </div>
                  </div>
                  <div data-v-28a7b29f="" class="van-card__footer">
                    <button
                      data-v-28a7b29f=""
                      class="van-button van-button--default van-button--mini"
                    >
                      <div data-v-28a7b29f="" class="van-button__content">
                        <span data-v-28a7b29f="" class="van-button__text"
                          >按钮</span
                        >
                      </div>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      list: [],
      loading: false,
      finished: false,
    };
  },
  methods: {
    goback() {
      this.$router.go(-1);
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }
        // 加载状态结束
        this.loading = false;
        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },
  },
};
</script>

<style scoped>
.van-cell{
  padding: 0;
}
.van-card{
  padding: 15px 15px 0 0;
}
.van-card__thumb{
  width: 120px;
  height: 120px;
}
</style>
